import React from 'react';
import { FirstHeaderC, PrimaryC } from '../../comps';

class FirstHeaderDemo extends React.Component {
  state = {
    showIncome: false, //当前是否展开
    showIncomeR: false,
  };

  changeStatus = (i) => {
    this.setState({
      showIncome: i,
    });
  };
  changeStatusRight = (i) => {
    this.setState({
      showIncomeR: i,
    });
  };
  render() {
    return (
      <div style={{ padding: '20px' }}>
        <FirstHeaderC title='我是一级标题名' />
        <FirstHeaderC
          title='一级标题展开收起按钮'
          Left={<div>xxxx</div>}
          Right={<div>xxxx</div>}
          arrowBtn={true}
          onExpendClick={this.changeStatus} //展开箭头按钮事件
        />
        {this.state.showIncome ? <div style={{ height: '100px' }}></div> : ''}
        <div>
          <FirstHeaderC
            title='我是一级标题名'
            Left={<div>xxxx</div>}
            Right={<div style={{ display: 'inline-block' }}>xxxx</div>}
            arrowBtn={true}
            arrowBtnPosition={'right'}
            arrowBtnTxt={'明细'}
            showContent={this.state.showIncomeR}
            onExpendClick={this.changeStatusRight} //展开箭头按钮事件
          />
        </div>
        {this.state.showIncomeR ? <div style={{ height: '100px' }}>内容</div> : ''}
        <PrimaryC
          title='变更状态'
          onClick={() => {
            this.setState({ showIncomeR: !this.state.showIncomeR });
          }}
        />
        <br />
        <div style={{ width: '500px' }}>
          <FirstHeaderC title='我是一级标题名' Left={<div>xxxx</div>} Right={<div>xxxx</div>} />
        </div>
        <br />
      </div>
    );
  }
}

export default FirstHeaderDemo;
